<template>
  <div>
    <deback-index>
      <van-icon name="arrow-left" class="icon-one" @click="router" />
      <h6>新增地址</h6>
    </deback-index>
    <!-- 地址项 -->
    <van-form @submit="onSubmit" ref="form">
      <van-field v-model="form.text" label="收货人" :rules="textRules" />
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="form.tel"
        type="tel"
        label="手机号码"
        :rules="telRules"
      />
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field
        v-model="form.email"
        type="text"
        label="邮编"
        :rules="emailRules"
      />

      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field
        readonly
        clickable
        name="area"
        :value="form.value"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <!-- 输入密码 -->
      <van-field
        v-model="form.address"
        type="text"
        label="详细地址"
        :rules="addressRules"
      />
      <van-field
        name="switch"
        label="设置为默认地址"
        label-width="8em"
        input-align="right"
      >
        <template #input>
          <van-switch
            v-model="switchChecked"
            size="20"
            active-color="#FD6801"
            inactive-color="#FDFDFD"
          />
        </template>
      </van-field>
      <van-button
        type="default"
        color="#FF6600"
        @click="submit"
        block
        native-type="submit"
        >保存</van-button
      >
    </van-form>
  </div>
</template>

<script>
import debackIndex from "../components/debackIndex.vue";
import { areaList } from "@vant/area-data";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  name: "VantAddress",
  components: {
    debackIndex,
  },
  data() {
    return {
      isEdit: false,
      // 手机号验证规则
      textRules: [
        {
          required: true,
          message: "用户名不能为空",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^.{2,12}$/.test(value);
          },
          message: "用户名必须是2-12为字符",
        },
      ],
      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
        },
      ],
      // 邮编校验规则
      emailRules: [
        {
          required: true,
          message: "你还没有填写邮政编码",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^[0-9]{6}$/.test(value);
          },
          message: "中国邮政编码为6位数字",
        },
      ],
      // 详细地址表单验证
      addressRules: [
        {
          required: true,
          message: "你还没有填写详细地址",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^.{2,50}$/.test(value);
          },
          message: "地址最低不少于2个字",
        },
      ],
      isEdit: false,
      form: {
        text: "", // 用户名
        tel: "", // 电话
        email: "", //邮政编码
        address: "", //详细地址
        value: "",
      },
      // 省
      switchChecked: false,
      showArea: false,
      areaList,
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.edit) {
      var edit = JSON.parse(this.$route.query.edit);
      console.log(edit);
      this.isEdit = true; // 如果能接受到参数那么状态就为true
      this.form = edit.item;
      this.index = edit.index;
    }
  },

  methods: {
    validator(val) {
      return /1\d{10}/.test(val);
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    ...mapMutations(["addAdddress", "updatePath"]),
    router() {
      this.$router.go(-1);
    },
    onConfirm(values) {
      console.log(values);
      this.form.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      console.log(this.form.value);
      this.showArea = false;
    },
    submit() {
      console.log(this.form);
      this.$refs.form
        .validate()
        .then(() => {
          if (this.isEdit) {
            this.updatePath({
              index: this.index,
              item: this.form,
            });
            this.$router.go(-1);
          } else {
            this.$router.go(-1);
            this.addAdddress(this.form);
          }

          console.log("成功 ！");
          

          if (this.isEdit) {
            /*        this.updatePath({
            index:this.index,
            item:this.form
          }) */
          }
        })
        .catch(() => {
          return Toast("请将信息填写完整");
        });
    },
  },
};
</script>

<style scoped>
.van-button {
  margin: 0 auto;
  width: 95%;
}
</style>